<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>

    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="__ADMINTMPL__/Res/css/x-admin.css" media="all">
    <link rel="stylesheet" href="__ADMINTMPL__/Res/lib/bootstrap/css/bootstrap.css" media="all">
    <link rel="stylesheet" href="__ADMINTMPL__/Res/lib/bootstrap/js/bootstrap.min.js" media="all">
</head>

<body>
<style type="text/css">
    legend {
        display: block;
        width: 100px;
        border-bottom: 0px;
        font-family: "Microsoft YaHei", "Helvetica Neue";
    }

    legend a {
        color: #666;
    }

    legend a:hover {
        text-decoration: none;
    }

    .layui-table {
        font-family: "Microsoft YaHei", "Helvetica Neue";
    }
</style>
<div class="x-body">
    <blockquote class="layui-elem-quote">
        欢迎使用通用后台系统！<span class="f-14">v1.0</span> &nbsp;&nbsp;登录次数：226563
    </blockquote>
    <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-blue"> <i class="fa fa-address-card"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="机构总数"><i class="iconfont " data-icon=""></i>
                            <h1>10</h1>
                        </a>

                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="机构总数"> <i class="iconfont " data-icon=""></i><span>机构总数</span></a>

                </div>
            </section>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-commred"> <i class="fa fa-handshake-o"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="今日新增"> <i class="iconfont " data-icon=""></i>
                            <h1>10</h1>
                        </a>

                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="今日新增"> <i class="iconfont " data-icon=""></i><span>今日新增</span></a>

                </div>
            </section>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-dark-green"> <i class="fa fa-bar-chart"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="订单总数"> <i class="iconfont " data-icon=""></i>
                            <h1>10</h1>
                        </a>
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="订单总数"> <i class="iconfont " data-icon=""></i><span>订单总数</span></a>
                </div>
            </section>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-yellow-green"> <i class="fa fa-cubes"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="今日新增"> <i class="iconfont " data-icon=""></i>
                            <h1>10</h1>
                        </a>
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="今日新增"> <i class="iconfont " data-icon=""></i><span>今日新增</span></a>
                </div>
            </section>
        </div>

    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
        <legend><a name="default">信息统计</a></legend>
    </fieldset>

    <!--相关统计-->
    <div class="row">
        <div class="col-sm-6">
            <section class="panel">
                <div class="panel-heading">区域统计</div>
                <div class="panel-body">
                    <div class="echarts" id="area" style="height:300px; height:350px"></div>
                </div>
            </section>
        </div>
        <div class="col-sm-6">
            <section class="panel">
                <div class="panel-heading">一周统计</div>
                <div class="panel-body">
                    <div class="echarts" id="main" style="height:300px; height:350px"></div>
                </div>
            </section>
        </div>
        <div class="col-sm-6">
            <section class="panel">
                <div class="panel-heading">年度统计</div>
                <div class="panel-body">
                    <div class="echarts" id="years" style="height:300px; height:350px"></div>
                </div>
            </section>
        </div>
        <div class="col-sm-6">
            <section class="panel">
                <div class="panel-heading">产品统计</div>
                <div class="panel-body">
                    <div class="echarts" id="product" style="height:300px; height:350px"></div>
                </div>
            </section>
        </div>
    </div>

    <script src="__ADMINTMPL__/Res/lib/layui2.2.5/layui.js" charset="utf-8"></script>
    <!-- <script src="./js/index.js"></script> -->
    <script src="__ADMINTMPL__/Res/js/echarts.min.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['车贷', '房贷', '信用贷']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                    name: '车贷',
                    type: 'line',
                    stack: '总量',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '房贷',
                    type: 'line',
                    stack: '总量',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '信用贷',
                    type: 'line',
                    stack: '总量',
                    data: [150, 232, 201, 154, 190, 330, 410]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    <script type="text/javascript">
        // 指定图表的配置项和数据
        var myChart = echarts.init(document.getElementById('area'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '地区订单统计',
                subtext: '纯属虚构',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['广州', '佛山', '东莞', '中山', '深圳']
            },
            series: [{
                name: '地区会员数量',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    { value: 6335, name: '广州' },
                    { value: 4310, name: '佛山' },
                    { value: 2310, name: '东莞' },
                    { value: 3310, name: '中山' },
                    { value: 9310, name: '深圳' }
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('years'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '年度订单统计',
                subtext: '纯属虚构',
                x: 'center'
            },
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                axisTick: {
                    alignWithLabel: true
                }
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: '活跃度',
                type: 'bar',
                barWidth: '60%',
                data: [10, 52, 200, 334, 390, 330, 220, 200, 334, 390, 330, 220]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('product'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '产品订单比例',
                subtext: '纯属虚构',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['车贷', '房贷']
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    { value: 1335, name: '车贷' },
                    { value: 310, name: '房贷' }
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

</div>
<div class="layui-footer footer footer-demo">
    <div class="layui-main">
        <p><a href="/"> Copyright ©2017 17sucai.com All Rights Reserved.</a> </p>
    </div>
</div>
</body>

</html>